import { Button, Dialog, Form, Input, List, Modal, Switch } from 'antd-mobile'
import { useTitle } from 'ahooks'
import React from 'react'
import { CameraOutline } from 'antd-mobile-icons'
import './Components/Identity.less'
import { history } from 'umi'

export default function Identity() {
  let temp = useTitle('身份认证')

  //保存
  const onFinish = (data: { userName: string, identifyId: number, phone: number }) => {

    //提示框
    // console.log(data)
    Dialog.show({
      content: <span>绑定成功后不可修改，确定绑定<span style={{ color: 'rgba(33, 180, 124, 1)' }}>【{[data.userName]}】</span>为本账号的认证身份?</span>,
      closeOnAction: true,
      closeOnMaskClick: true,
      onAction(action, index) {
        if (action.key == 'sure') {
          //请求数据
          // const res = await ();
          // if(res.success){
          //   Dialog.show({
          //     content: <span>请先前往重庆电子税务局网站或重庆税务APP注册账号，否则无法代开发票。</span>,
          //     closeOnAction: true,
          //     closeOnMaskClick: true,
          //     actions: [
          //       {
          //         key: "sure",
          //         text: "知道了",
          //         style: React.CSSProperties = { color: 'rgba(33, 180, 124, 1)' }
          //       }
          //     ],
          //     onClose() {
          //       //跳转页面
          history.push(
            '/Invoice/record'
            //测试
            ,{state:data}
         );
          //     },
          //   })
          // }
        }else{
          //不处理
        }
      },
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
          },
          {
            key: 'sure',
            text: '确认',
            style: React.CSSProperties = { color: 'rgb(33,180,124)' }
          },
        ],
      ],
    })

    //提示完跳转

    // const a =()=>{
    //   console.log('1')
    // }
  }

  return (
    <div className='style_all'>
      <div className='inputs'>
        <Form
          name='form'
          onFinish={onFinish}
          layout='horizontal'>
          <Form.Item label='手机号' name='phone'
            rules={[
              {
                required: true,
                message: '手机号为必填项',
              },
              {
                pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
                message: '请正确输入电话号码',
              },

            ]}>
            <Input
              placeholder='请输入' clearable />
          </Form.Item>
          <Form.Item
            label='姓名'
            name='userName'
            rules={[
              {
                required: true,
                message: '姓名为必填项',
              },
              {
                pattern: /^[\u4e00-\u9fa5]{2,}$/,
                message: '请正确输入中文姓名',
              }
            ]}
            extra={<CameraOutline style={{ width: "20px", height: "18.5px" }} />}
          >
            <Input
              placeholder='请输入'
              clearable type='text'
            />

          </Form.Item>
          <Form.Item label='身份证号' name='identifyId'
            rules={[
              {
                required: true,
                message: '身份证号为必填项',
              },
              {
                pattern: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                message: '请正确输入身份证号码',
              }
            ]}>
            <Input
              placeholder='请输入' clearable type='text' />
          </Form.Item>

          <Button
            block
            type='submit'
            size='large'
            className='style_button'
          >
            保存
          </Button>
        </Form>
        <div>
          <span className='style_span'>
            遇到问题？<a className='style_a' onClick={() => {
              //提示电话
              Dialog.show({
                // content: '拨打客服电话： 023-66812366',
                closeOnAction: true,
                closeOnMaskClick: true,
                content: <span>拨打客服电话： <span style={{ color: 'rgba(33, 180, 124, 1)' }}>023-66812366</span></span>,
                actions: [
                  {
                    key: "sure",
                    text: "知道了",
                    style: React.CSSProperties = { color: 'rgba(33, 180, 124, 1)' }
                  }
                ],
              })
            }}>联系客服</a>
          </span>
        </div>
      </div>

    </div>
  )
}
